<template>
	<div>
		<div :id="id" :style="style"> </div>
	</div>
 
</template>
<script>
import echarts from 'echarts/lib/echarts';
	import "echarts/lib/chart/line";
export default {
  name: "Chart",
  data() {
    return {
      //echarts实例
      chart: ""
    };
  },
   watch: {
    //观察option的变化
    option: {
      handler(newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.chart.setOption(newVal);
          } else {
            this.chart.setOption(oldVal);
          }
        } else {
            this.init();
        }
      },
      deep: true //对象内部属性的监听，关键。
    }
  },
  props: {
    //父组件需要传递的参数：id，width，height，option
    id: {
      type: String
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    option: {
      type: Object,
      //Object类型的prop值一定要用函数return出来，不然会报错。原理和data是一样的，
      //使用闭包保证一个vue实例拥有自己的一份props
      default() {
        return {
			backgroundColor: 'rgb(255,255,255,0)',
				legend: {
					data: ['基金', '股票',"期货" ],
					top: '0',
					textStyle:{//图例文字的样式
					            color:'#ccc',
					            fontSize:16
					        }
				},
				grid: {
					left: '5%',
					right: '5%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
					axisLabel: {
						show: true,
						textStyle: {
							color: '#fff'
						}
					},
					 axisLine: {
					        lineStyle: {
					            color: '#fff', // 颜色
					            width: 1 // 粗细
					        }
					    }
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						show: true,
						textStyle: {
							color: '#fff'
						}
					},
					 axisLine: {
					        lineStyle: {
					            color: '#fff', // 颜色
					            width: 1 // 粗细
					        }
					    }
				},
				series: [{
						name: '基金',
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0,
								color: 'red' // 0% 处的颜色
							}, {
								offset: 0.6,
								color: 'yellow' // 100% 处的颜色
							}, {
								offset: 1,
								color: '#FFFFFF' // 100% 处的颜色
							}],
							globalCoord: false // 缺省为 false
						},
						areaStyle: {}
					},
					{
						name: '股票',
						data: [1420, 432, 1601, 1234, 1390, 830, 920],
						type: 'line',
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0,
								color: 'rgba(133,244,55,0.4)' // 0% 处的颜色
							}, {
								offset: 0.2,
								color: 'rgba(33,44,55,0.4)' // 100% 处的颜色
							}],
							globalCoord: false // 缺省为 false
						},
						areaStyle: {}
          },
          {
						name: '期货',
						data: [240, 832, 501, 734, 490, 1090, 1920],
						type: 'line',
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0,
								color: 'rgba(123,123,123,0.4)' // 0% 处的颜色
							}, {
								offset: 0.2,
								color: 'rgba(166,66,255,0.4)' // 100% 处的颜色
							}],
							globalCoord: false // 缺省为 false
						},
						areaStyle: {}
					}
				]
        };
      }
    }
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width
      };
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chart.setOption(this.option);
      window.addEventListener("resize", this.chart.resize);
    }
  }
};
</script>